import { log } from "console";
import {ElButton, ElMessage} from "element-plus";
import {computed, defineComponent, onMounted, ref, watch} from "vue";
import Pagination from "~/src/components/Pagination";
import SelectMzjf from "~/src/components/SelectMzjf";
import { Steps } from "~/src/components/Steps";
import { UserInfo } from "~/src/components/UserInfo";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import { getMzjf, getZyfyqdcx} from "@/api/his";
import {zyfyqdcxItemInfo, ItemInfo, zyfyqdcxChild} from "@/api/typing";
import zwsj from "@/assets/images/zwsj.png";
import {closeLoading, showLoading} from "@/utils";
import router from "@/router";
import Zyfyqdcxtc from "~/src/components/zyfyqdcxtc"


export default defineComponent({
    setup: function () {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;
        const pageSize= KEEP_VIDEO_TOP ? 5 : 6;
        // 控制弹窗
        const dialogVisible = ref(false);
        const currentItem = ref<zyfyqdcxItemInfo | null>(null);
        const Items = ref<zyfyqdcxChild[]>([]);
        const openDialog = (item: zyfyqdcxItemInfo) => {
            currentItem.value = item;
            Items.value = item.child;
            dialogVisible.value = true;
        };
        const closeDialog = () => {
            dialogVisible.value = false;
            currentItem.value = null;
            Items.value = [];
        };

        const showDatas = ref<zyfyqdcxItemInfo[]>([]);
        const datas = ref<zyfyqdcxItemInfo[]>([]);
        // 新增：存储预交金余额（接口返回的yjj字段）
        const prepayBalance = ref<string>('0');

        // 定义按钮激活类型（rq：按日期，lx：按费用类型）
        const activeType = ref('rq');
        // 接口请求参数type，与activeType联动
        const fytype = ref('rq');

        // 计算总金额（datas中所有zje的和）
        const totalAmount = computed(() => {
            return datas.value.reduce((sum, item) => {
                return sum + Number(item.zje || 0);
            }, 0);
        });

        // 获取出院结算数据
        async function getgetZyfyqdcxData() {
            showLoading();
            try {
                const res = await getZyfyqdcx({
                    type: fytype.value
                });
                datas.value = res.rows!;
                prepayBalance.value = res.yjj || '0'; // 存储预交金余额
            } catch (error) {
                ElMessage.error('获取数据失败');
            } finally {
                closeLoading();
            }
        }
        getgetZyfyqdcxData();

        // 接收分页组件 分页数据
        const handlePageChange = (Datas: any) => {
            showDatas.value = Datas;
        };

        // 切换类型
        const handleClickType = (type: string) => {
            activeType.value = type;
            fytype.value = type;
            getgetZyfyqdcxData(); // 切换后重新请求数据
        }

        return () => <>
            <div class={Style.top}>
                <UserInfo></UserInfo>
                <div class={Style.container_mar}>
                    <div class={Style.body}>
                        {/* 按钮 + 金额展示区：用flex横向布局 */}
                        <div class={Style.title}>
                            {/* 原有按钮区域 */}
                            <div class={Style.title_btn}>
                                <ElButton
                                    type={activeType.value === 'rq' ? 'primary' : 'default'}
                                    class={Style.btn_type_rq}
                                    onClick={() => {handleClickType('rq')}}
                                >
                                    按日期查询
                                </ElButton>
                                <ElButton
                                    type={activeType.value === 'lx' ? 'primary' : 'default'}
                                    class={Style.btn_type_lx}
                                    onClick={() => {handleClickType('lx')}}
                                >
                                    按费用类型查询
                                </ElButton>
                            </div>
                            <div class={Style.title_content}>
                                <span class={Style.title_content_text}>参考总金额: {totalAmount.value} 元</span>
                                <span class={Style.title_content_text}>当前预交金: {prepayBalance.value} 元</span>
                            </div>
                        </div>

                        {showDatas.value.length > 0 ?
                            <div>
                                {showDatas.value.map((item) => (
                                    <SelectMzjf
                                        //全选状态下，将true/false选中状态1-true/false纳入key的变化，会重新渲染组件
                                        key={`${item.sfxm_id}`}
                                        style={{marginTop: "28px"}}
                                        id={item.sfxm_id}
                                        title={item.sfxm_mc}
                                        money={item.zje}
                                        jzks={item?.jzks}
                                        jzsj={item?.jzsj}
                                        fytype={activeType.value}
                                        showCheckbox={false}  // 传入 false 隐藏复选框
                                    >
                                        {{
                                            btn1: () => (
                                                <div >
                                                    <ElButton class={[Style.zyyjbtn]}
                                                              type="success"
                                                              onClick={() => openDialog(item)}
                                                    >
                                                        详情
                                                    </ElButton>
                                                </div>
                                            )
                                        }}
                                    </SelectMzjf>
                                ))}
                            </div>:
                            <img src={zwsj} style={{width: '70%', height:'480px' }}/>
                        }
                    </div>
                    <Pagination
                        style={{ marginTop: "20px", padding: "0 64px", marginBottom: "10px" }}
                        pageSize={pageSize}
                        Data={datas.value}
                        onPageChange={handlePageChange}
                    ></Pagination>
                    <Zyfyqdcxtc
                        visible={dialogVisible.value}
                        title="详细信息"
                        children={Items.value}
                        zje={currentItem.value?.zje || ""}
                        jzks={currentItem.value?.jzks || ""}
                        onClose={closeDialog}
                    />
                </div>
            </div>
        </>;
    }
})
